<template>
	<view class="page">
		<u-sticky>
			<view class="header_box" style="background-image: url('https://morgan.dingxians.cn/static/yfs/0.png');">
				<hedsty :headCentext="challenge_box_data.name"></hedsty>
			</view>
		</u-sticky>
		<view class="toubuzhaopintop_box">
			<image :src="mhObj[0].image" mode="widthFix" />
		</view>
		<view class="dizuo_boxss" style="background-image: url('https://morgan.dingxians.cn/static/yfs/01.png');">
		</view>

		<template>
			<!-- <view class="shangxiaxiang_left_box" @click="last">
                <view class="top_box">
                    <image src="https://morgan.dingxians.cn/static/yfs/left.png" mode="scaleToFill" />
                </view>
                <view class="text_boxsss">上一箱</view>
            </view>
            <view class="shangxiaxiang_right_box" @click="next">
                <view class="top_box">
                    <image src="https://morgan.dingxians.cn/static/yfs/right.png" mode="scaleToFill" />
                </view>
                <view class="text_boxsss">下一箱</view>
            </view> -->
			<view class="cebianniu_box1" @click="entersx">
				<image src="https://morgan.dingxians.cn/static/yfs/shauxin.png" mode="scaleToFill" />
			</view>
			<view class="cebianniu_box2" @click="tiaozhuan">
				<image src="https://morgan.dingxians.cn/static/yfs/shangdai.png" mode="scaleToFill" />
			</view>
			<view class="cebianniu_box3" @click="recordDraw">
				<image src="https://morgan.dingxians.cn/static/yfs/jilu.png" mode="scaleToFill" />
			</view>
			<view class="cebianniu_box4" @click="rulePup">
				<image src="https://morgan.dingxians.cn/static/yfs/guize.png" mode="scaleToFill" />
			</view>

			<button class="cebianniu_box5" @click="onShare" open-type="share">
				<image src="https://morgan.dingxians.cn/static/yfs/fenxiang.png" mode="scaleToFill" />
			</button>
		</template>
		<view class="mingzi_nboix" style="background-image: url('https://morgan.dingxians.cn/static/yfs/mingzi.png');">
			本箱剩余&emsp;{{ challenge_box_data.surplus_num }}
		</view>
		<view class="zhongjianbufdenbox">
			<view class="left_zuigaopin_box">
				<view class="shangxiaxiang" @click="last"
					style="margin-bottom: 19rpx; background-image: url('https://morgan.dingxians.cn/static/patatupian/11.png');">
					<view class="jiantou">
						<image src="https://morgan.dingxians.cn/static/patatupian/13.png" mode="scaleToFill" />
					</view>
					<view class="zi">上一箱</view>
				</view>
				<view class="shangxiaxiang" @click="next"
					style="background-image: url('https://morgan.dingxians.cn/static/patatupian/11.png');">
					<view class="jiantou">
						<image src="https://morgan.dingxians.cn/static/patatupian/12.png" mode="scaleToFill" />
					</view>
					<view class="zi">下一箱</view>
				</view>
			</view>
			<view class="right_boxsss">
				<view class="r_tt_box"
					style="background-image: url('https://morgan.dingxians.cn/static/yfs/xzxx.png');">
					<view class="dange1_box" style="margin-bottom: 8rpx;">
						<view class="left_icon_box">
							<image src="https://morgan.dingxians.cn/static/yfs/icon1.png" mode="scaleToFill" />
						</view>
						<view class="rt_text_box">
							当前{{ challenge_box_data.current_boxs }}/{{ challenge_box_data.total_boxs }}箱
						</view>
					</view>
					<view class="dange1_box" style="margin-bottom: 8rpx;">
						<view class="left_icon_box">
							<image src="https://morgan.dingxians.cn/static/yfs/icon2.png" mode="scaleToFill" />
						</view>
						<view class="rt_text_box">售价{{ challenge_box_data.price }}元素/箱</view>
					</view>
					<view class="dange1_box">
						<view class="left_icon_box">
							<image src="https://morgan.dingxians.cn/static/yfs/icon3.png" mode="scaleToFill" />
						</view>
						<view class="rt_text_box" style="display: flex;" v-if="catId == 4">
							<template v-if="Number(sy_miao) > 0">
								锁箱还剩<uni-countdown :showDay="false" @timeup="timeup" :showHour="false"
									:showMinute="false" splitorColor="#ffffff" color="#ffffff"
									:second="sy_miao"></uni-countdown>秒
							</template>
						</view>
						<view v-else class="rt_text_box" v-html="mhObj[0].small_title"></view>

					</view>
				</view>
				<template v-if="catId == 4">
					<view class="bjg_suoxiang_box">
						<view class="bottom_right_box" @click="lockBox"
							style="background-image: url('https://morgan.dingxians.cn/static/yfs/hx.png');">
							<view class="left_icon_3_box">
								<image src="https://morgan.dingxians.cn/static/yfs/jiaohuan.png" mode="scaleToFill" />
							</view>
							<view class="huanyixiang">
								锁箱
							</view>
						</view>
						<view class="bottom_right_box" @click="hxBtn"
							style="background-image: url('https://morgan.dingxians.cn/static/yfs/hx.png');">
							<view class="left_icon_3_box">
								<image src="https://morgan.dingxians.cn/static/yfs/jiaohuan.png" mode="scaleToFill" />
							</view>
							<view class="huanyixiang">
								换箱
							</view>
						</view>
					</view>
				</template>
				<template v-else>
					<view class="bjg_suoxiang_box1">
						<view class="bottom_right_box" @click="hxBtn"
							style="background-image: url('https://morgan.dingxians.cn/static/yfs/hx.png');">
							<view class="left_icon_3_box">
								<image src="https://morgan.dingxians.cn/static/yfs/jiaohuan.png" mode="scaleToFill" />
							</view>
							<view class="huanyixiang">
								换箱
							</view>
						</view>
					</view>
				</template>
			</view>
		</view>

		<view class="gailvznbgabn_box"
			style="background-image: url('https://morgan.dingxians.cn/static/yfs/zlll.png');">
			赏品总览
		</view>

		<view class="content_bvox">
			<view class="big_con_box" v-for="(item, index) in mhObj" :key="index">
				<view class="dange_box"
					:style="{ backgroundImage: 'url(https://morgan.dingxians.cn/static/yfs/10.png)' }"
					@click="spDetail(item)">
					<view class="dengji_box" :class="'dengji_box_' + '10'">{{ item.level_id_name }}</view>
					<view class="image_box">
						<image :src="item.image" mode="scaleToFill" />
						<view class="ysk_bix" v-if="item.num < 1">
							<image src="https://morgan.dingxians.cn/upload/20241018/6712072ef0f86.png"
								mode="widthFix" />
						</view>
					</view>
					<view class="yuansu_box">
						<view class="left" v-if="item.level_id > 6">概率：{{ item.pro }}</view>
						<view class="left" v-if="item.level_id <= 6">概率：{{ jiaGv }}% </view>
						<view class="left">{{ item.num }}/{{ item.original_num }}</view>
					</view>
				</view>
				<view class="name_box">{{ item.title }}</view>
			</view>
			<view class="s" style="width: 160rpx;" v-for="i in 2"></view>
		</view>
		<view class="h" style="height: 240rpx;"></view>
		<view class="choujiang_box">
			<view class="dange_choujiang_box" v-for="(item, index) in drawOpen" :key="index" @click="openDraw(item)"
				style="background-image: url('https://morgan.dingxians.cn/static/yfs/opens.png');">
				<view class="top_jichou_box">{{ item.val }}抽</view>
				<view class="top_price_box">{{ (Number(item.val) * Number(challenge_box_data.price)).toFixed(2) }}元素
				</view>
			</view>
			<view class="dange_choujiang_box" @click="$no(canning)" v-if="catId == 4"
				style="background-image: url('https://morgan.dingxians.cn/static/yfs/opens.png');">
				<view class="top_jichou_box">包套</view>
				<view class="top_price_box">{{ Number(baotao_price).toFixed(2) }}元素
				</view>
			</view>
		</view>

		<!-- <drawRecord :recordShow="recordShow" @handlePopup="handlePopup" :rewardList="rewardList">
            <template v-slot:empty>
            </template>
        </drawRecord> -->
		<rule :rulecontent="rulecontent" :ruleShow="ruleShow" @handlePopup="handlePopup"></rule>
		<drawzf @closePopup="closePopup" :challenge_box_data="challenge_box_data" :payShow="payShow" :burst="beishu"
			@payType="payType" :payId="payId" @agreeBtn="agreeBtn" :agreeSta="agreeSta" :point="point"
			:balance="balance" :pay_price="pay_price" @goumai="$no(goumai)" :si_dPay="si_dPay" @conClick="conClick">
		</drawzf>

		<frawResult :drawResultShow="drawResultShow" @gotoin="gotoin" @accept="accept" :prizeList="prizeList">
		</frawResult>
		<copupPopup :copupShow="copupShow" :copupList="copupList" @closecopupPopup="closecopupPopup"></copupPopup>
		<spdetail :ruleShow="detailShow" @handlePopup="handle1Popup" :spDetailObj="spDetailObj"
			:jiaprice="challenge_box_data.price"></spdetail>
		<bxfd :ruleShow="bxShow" @handlePopup="handle1Popup" :bxDetailObj="bxDetailObj"></bxfd>


		<u-popup :show="recordShow" mode="bottom" bgColor="transparent">
			<view class="tanchuang_box"
				:style="{ backgroundImage: ' url(https://morgan.dingxians.cn/static/btm1.png)' }">
				<view class="title_box"
					:style="{ backgroundImage: ' url(https://morgan.dingxians.cn/static/recordDrwa/2.png)' }">
				</view>
				<view class="close_guanbi_box" @click="hidePopup"
					:style="{ backgroundImage: ' url(https://morgan.dingxians.cn/static/recordDrwa/3.png)' }"></view>


				<z-paging ref="paging" :fixed="false" v-model="rewardList" @query="queryList">

					<view class="dange_boxjilu" v-if="toprecordList.length > 0" v-for="(items, indexs) in toprecordList"
						:key="indexs" :style="{ background: 'rgba(120, 9, 9, .5)' }">
						<view class="touxiang_box">
							<image :src="items.avatar" mode="scaleToFill" />
							<view class="touxiangkuang_box" v-if="items.level_id > 0">
								<image
									:src="'https://morgan.dingxians.cn/static/txk/' + (items.level_id >= 1 && items.level_id <= 4 ? '1_4' : items.level_id >= 5 && items.level_id <= 8 ? '5_8' : items.level_id >= 9 && items.level_id <= 12 ? '9_12' : items.level_id >= 13 && items.level_id <= 16 ? '13_16' : '17_20') + '.png'"
									mode="widthFix" />
							</view>
						</view>
						<view class="name_shaop_box">
							<view class="t_1_box">
								<!-- 345 -->
								<view class="left_name_box">{{ items.nickname }}</view>
								<view class="rt_level_name_box">
									<image
										:src="'https://morgan.dingxians.cn/static/user_levelid/' + items.level_id + '.png'"
										mode="heightFix" />
								</view>
							</view>
							<view class="b_2_box">{{ items.created_at }}</view>
						</view>
						<view class="right_boxss">
							<view class="shop_dengjibox">{{ items.box_prize_level_name }}</view>
							<view class="shijian_box">{{ items.box_prize_name }}</view>
						</view>
						<!-- <view class="right_boxss" v-else>
                            <view class="shop_dengjibox">{{ item.level_name }}</view>
                            <view class="shijian_box">{{ item.goods_name }}</view>
                        </view> -->
					</view>
					<!-- <view class="haudongquyu_nox"> -->
					<view class="dange_boxjilu" v-for="(item, index) in rewardList" :key="index"
						:style="{ background: 'rgba(120, 9, 9, .5)' }">
						<view class="touxiang_box">
							<image :src="item.avatar" mode="scaleToFill" />
							<view class="touxiangkuang_box" v-if="item.level_id > 0">
								<image
									:src="'https://morgan.dingxians.cn/static/txk/' + (item.level_id >= 1 && item.level_id <= 4 ? '1_4' : item.level_id >= 5 && item.level_id <= 8 ? '5_8' : item.level_id >= 9 && item.level_id <= 12 ? '9_12' : item.level_id >= 13 && item.level_id <= 16 ? '13_16' : '17_20') + '.png'"
									mode="widthFix" />
							</view>
						</view>
						<view class="name_shaop_box">
							<view class="t_1_box">
								<view class="left_name_box">{{ item.nickname }}</view>
								<view class="rt_level_name_box">
									<image
										:src="'https://morgan.dingxians.cn/static/user_levelid/' + item.level_id + '.png'"
										mode="heightFix" />
								</view>
							</view>
							<view class="b_2_box">{{ item.created_at }}</view>
						</view>
						<view class="right_boxss">
							<view class="shop_dengjibox">{{ item.box_prize_level_name }}</view>
							<view class="shijian_box">{{ item.box_prize_name }}</view>
						</view>
						<!-- <view class="right_boxss" v-else>
                            <view class="shop_dengjibox">{{ item.level_name }}</view>
                            <view class="shijian_box">{{ item.goods_name }}</view>
                        </view> -->
					</view>
					<!-- </view> -->
				</z-paging>

				<!-- <empty v-else></empty> -->
			</view>
		</u-popup>

	</view>
</template>
<script>
	import hedsty from '../components/hedsty.vue'
	import drawRecord from '../components/drawRecord.vue'
	import rule from '../components/rule.vue'
	import drawzf from '../components/drawzf.vue'
	import frawResult from '../components/frawResultdq.vue'
	import copupPopup from '../components/copup.vue'
	import spdetail from '../components/detail.vue'
	import bxfd from '../components/bxfd.vue'

	export default {
		components: {
			hedsty,
			drawRecord,
			rule,
			drawzf,
			frawResult,
			copupPopup,
			spdetail,
			bxfd
		},
		data() {
			return {
				noClick: true,
				recordShow: false,
				detailShow: false,
				ruleShow: false,
				rulecontent: '',
				mhId: '',
				boxs: '',
				challenge_box_data: {},
				baotao_price: '',
				mhObj: [{
					image: '',
					small_title: '',
					title: '',
					price: ''
				}],
				drawOpen: [{
						id: 1,
						val: 1
					},
					{
						id: 2,
						val: 3,

					},
					{
						id: 3,
						val: 5
					},
					{
						id: 4,
						val: 10
					}
				],
				burst: 1,
				payShow: false,
				// #ifndef MP-ALIPAY
				payId: 1,
				// #endif
				// #ifdef MP-ALIPAY
				payId: 3,
				// #endif
				agreeSta: true,
				point: '0.00',
				balance: '0.00',
				pay_price: '0.00',
				drawResultShow: false,
				si_dPay: false,
				prizeList: [],
				rewardList: [],
				copupShow: false,
				copupList: [],
				catId: '',
				beishu: '',
				detailShow: false,
				spDetailObj: {},
				bxShow: false,
				bxDetailObj: {},
				jiaGv: '',
				toprecordList: [],
				package: '',
				sy_miao: '',
				foulPlay: 0, //1:小闯关

			}
		},
		computed: {},
		onLoad(e) {
			console.log(e)
			this.mhId = e.id
			this.catId = e.catId
			uni.setStorageSync('open', e.open)
			// #ifdef APP-PLUS
			this.agreeSta = true
			// #endif
			// if (e.open == '1') {
			this.boxs = e.boxs
			console.log(this.boxs, "123213123")
			// } else {
			//     this.boxs = uni.getStorageSync('boxs')
			// }
		},
		onHide() {
			uni.setStorageSync('boxs', '')
			console.log(uni.getStorageSync('boxs'), 'uni.getStorageSync')
		},
		onShow() {
			if (uni.getStorageSync('boxs')) {
				this.boxs = uni.getStorageSync('boxs')
			}

			this.getDetail()
		},
		methods: {
			timeup() {
				console.log('123123')
				this.getDetail()
			},
			hidePopup() {
				this.recordShow = false
			},
			tiaozhuan() {
				uni.switchTab({
					url: '/pages/bonus/index'
				})
			},
			// 分享的内容
			onShare() {
				let that = this
				uni.share({
					provider: 'weixin',
					scene: "WXSceneSession",
					type: 5,
					imageUrl: that.challenge_box_data.image,
					title: that.challenge_box_data.name + '第' + that.boxs + '箱，共' + that.challenge_box_data
						.total_num + '件，已开' + that.challenge_box_data.participations_num + '件，还剩' + that
						.challenge_box_data
						.difference_num + '件',
					miniProgram: {
						id: 'gh_7cbc8087cb4f',
						path: 'homePage/boxDetail?id=' + that
							.mhId + '&catId=' + that.catId + '&open=' + 1 + '&boxs=' + that.boxs,
						type: 0,
						webUrl: 'https://yq.dingxians.cn'
					},
					success: ret => {
						console.log('success', ret);
					},
					fail: err => {
						console.log('error', err);
					}
				});
			},
			spDetail(item) {
				if (item.level_id == 7 || item.level_id == 8) {
					this.bxDetailObj = item
					this.bxShow = true
				} else {
					this.detailShow = true
					this.spDetailObj = item
				}
			},
			handle1Popup() {
				this.detailShow = false
				this.bxShow = false
			},
			recordDraw() {
				// this.challengeBoxOrderPrizesWinnerRecord()
				this.recordShow = true

				this.$refs.paging.reload()
			},
			queryList(pageNo, pageSize) {
				let data = {
					boxs: this.boxs,
					challenge_box_id: this.mhId,
					page: pageNo,
					limit: 10,
				}
				this.$Request.get(this.$api.index.challengeBoxOrderPrizesWinnerRecord, data).then(res => {
					if (res.code == 200) {
						this.$refs.paging.complete(res.data.data.data)
						this.toprecordList = res.data.dan
					}
				})
			},
			rulePup() {
				this.$Request.get(this.$api.agreen.contents + `/challenge_rule`).then(res => {
					this.rulecontent = res.data.content
					this.ruleShow = true
				})
			},
			last() {
				if (this.boxs > 1) {
					this.boxs--
					this.getDetail()
				} else {
					this.$msg('已经是第一箱了')
				}
			},
			next() {
				if (this.boxs < this.challenge_box_data.total_boxs) {
					this.boxs++
					this.getDetail()
				} else {
					this.$msg('已经是最后一箱了')
				}
			},
			handlePopup() {
				this.recordShow = false
				this.ruleShow = false
			},
			entersx() {
				this.getDetail()
			},
			hxBtn() {
				this.$router('/homePage/hx?id=' + this.mhId)
			},
			getDetail() {
				uni.showLoading({
					title: '加载中'
				})
				let data = {
					boxs: this.boxs
				}
				this.$Request.get(this.$api.index.challengeBox + `/${this.mhId}`, data).then(res => {
					uni.hideLoading()
					if (res.code == 200) {
						this.challenge_box_data = res.data.challenge_box_data
						this.baotao_price = res.data.baotao_price
						this.mhObj = res.data.data
						this.sy_miao = res.data.sy_miao
						let jiade = []
						res.data.data.forEach(val => {
							if (val.level_id <= 6) {
								jiade.push(val)
							}
						});
						this.jiaGv = (100 / jiade.length).toFixed(2)
						console.log(jiade)
						this.boxs = res.data.challenge_box_data.current_boxs
						this.share.title = this.challenge_box_data.name + '第' + this.challenge_box_data
							.current_boxs + '箱，共' + res.data
							.total_num + '件，已开' + res.data.participations_num + '件，还剩' + res.data
							.difference_num + '件'
						this.share.parameter = '&id=' + this
							.mhId + '&catId=' + this.catId + '&boxs=' + this.boxs
						this.share.imageUrl = this.challenge_box_data.image
						// #ifdef MP-ALIPAY
						//  setTimeout(() => {
						uni.setNavigationBarTitle({
							title: this.challenge_box_data.name
						})
						// }, 600);
						// #endif
					}
				})
			},
			openDraw(item) {
				this.sy_miao = 0
				this.getDetail()
				this.package = ''
				if (this.catId == 4 || this.catId == 7) {
					this.burst = item.id
					this.beishu = item.val
					this.mPayment()
				} else if (this.catId == 1 || this.catId == 6) {
					if (item.id == 1) {
						this.burst = item.val
						this.beishu = item.val
						this.mPayment()
					} else {
						this.$msg('暂未开放！')
					}
				}


			},
			canning() {
				let that = this
				uni.showModal({
					title: "确定包套？",
					success: function(res) {
						if (res.confirm) {
							that.package = 1
							that.beishu = Number(that.baotao_price) / Number(that.challenge_box_data.price)
							that.mPayment()
						} else {
							console.log('取消')
						}
					}
				})

			},
			lockBox() {
				let that = this
				uni.showModal({
					title: "确定锁箱？",
					success: function(res) {
						if (res.confirm) {
							that.package = 2
							that.beishu = Number(that.baotao_price) / Number(that.challenge_box_data.price)
							that.mPayment()
							that.getDetail()
						} else {
							console.log('取消')
						}
					}
				})

			},
			conClick() {
				this.copupShow = true
				this.getConpup()
			},
			getConpup() {
				let data = {
					blind_box_id: this.mhId,
					pay_mode: this.burst,
					type: 3,
				}
				this.$Request.get(this.$api.index.userCouponsShow, data).then(res => {
					if (res.code == 200) {
						this.copupList = res.data.data
					}
				})
			},
			closecopupPopup() {
				this.copupShow = false
			},
			mPayment() {
				var data = {
					cat_id: this.catId,
					challenge_box_id: this.mhId,
					boxs: this.boxs, //当前第几箱
					pay_mode: this.burst,
					multiple: 1,
					coupon_id: '',
					boxs: this.boxs, //当前第几箱
					package: this.package
				}
				this.$Request.post(this.$api.index.challengeBoxConfirmPaymentPage, data).then(res => {
					this.foulPlay = res.data.data.tag //1:小闯关
					if (res.code == 401) {
						this.balance = res.data.data.deduction_balance
						this.point = res.data.data.deduction_point
						this.pay_price = res.data.data.pay_price
						this.si_dPay = true
						this.payShow = true
					} else if (res.code == 200) {
						this.balance = res.data.data.deduction_balance
						this.point = res.data.data.deduction_point
						this.pay_price = res.data.data.pay_price
						this.si_dPay = false
						this.payShow = true
					}
				})

			},
			// 微信或支付宝支付
			payMentapily() {
				let data = {
					type: this.payId,
					challenge_box_id: this.mhId,
					boxs: this.boxs, //当前第几箱
					id: 0,
					amount: this.pay_price,
					package: this.package,
					// #ifdef MP-WEIXIN
					market: 'wx',
					// #endif
					// #ifdef APP-PLUS
					market: '',
					// #endif
				}
				console.log(data, data)
				this.$Request.post(this.$api.user.rechargeOrders, data).then(res => {
					console.log(res)
					var pay_data = res.data.data

					if (this.payId == 1) {
						// #ifdef MP-WEIXIN
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: pay_data.timeStamp.toString(),
							nonceStr: pay_data.nonceStr,
							signType: 'MD5',
							package: pay_data.package,
							paySign: pay_data.paySign,
							success: (res) => {
								this.$msg('支付成功')
								setTimeout(() => {
									this.payBanalce()
								}, 500)
							},
							fail: (err) => {
								console.log(err)
							},
						})
						// #endif
						// #ifdef APP-PLUS
						uni.requestPayment({
							provider: 'wxpay',
							orderInfo: pay_data,
							success: (res) => {
								this.$msg('支付成功')
								setTimeout(() => {
									this.payBanalce()
								}, 500)
							},
							fail: (error) => {
								console.log(error)
							},
						})
						// #endif
					} else {
						uni.requestPayment({
							provider: 'alipay',
							orderInfo: pay_data.trade_no,
							success: (res) => {
								// this.$msg('支付成功')
								setTimeout(() => {
									this.payBanalce()
								}, 500)
							},
							fail: (error) => {
								console.log(error)
							},
						})
					}
				})
			},
			goumai() {
				if (this.agreeSta) {
					if (this.si_dPay) {
						console.log('跳转支付')
						this.payMentapily()
					} else {
						this.payBanalce()
					}
				} else {
					this.$msg('请先同意协议')
				}

			},
			payBanalce() {
				var data = {
					cat_id: this.catId,
					challenge_box_id: this.mhId, //箱子id
					pay_mode: this.burst,
					boxs: this.challenge_box_data.current_boxs, //当前第几箱
					multiple: 1,
					coupon_id: '',
					point_price: this.point,
					package: this.package,
				}
				if (this.catId == 4) {
					this.$showLoad('开套中~')
					if (this.foulPlay == 1) { //小闯关

						this.$Request.post(this.$api.index.draw_eight, data).then(res => {
							if (res.code == 200) {
								uni.hideLoading()
								this.payShow = false
								this.prizeList = res.data.participations_arr
								this.drawResultShow = true
								this.getDetail()
							}
						})
					} else {
						this.$Request.post(this.$api.index.challengeBoxDraw_six, data).then(res => {
							if (res.code == 200) {
								uni.hideLoading()
								this.payShow = false
								this.prizeList = res.data.participations_arr
								this.drawResultShow = true
								this.getDetail()
							}
						})
					}

				} else if (this.catId == 6) {
					this.$Request.post(this.$api.index.draw_box, data).then(res => {
						if (res.code == 200) {
							this.payShow = false
							this.prizeList = res.data.participations_arr
							this.drawResultShow = true
							this.getDetail()
						}
					})
				} else if (this.catId == 7) {
					this.$Request.post(this.$api.index.draw_seven, data).then(res => {
						if (res.code == 200) {
							this.payShow = false
							this.prizeList = res.data.participations_arr
							this.drawResultShow = true
							this.getDetail()
						}
					})
				} else {
					this.$Request.post(this.$api.index.challengeBoxDraw_one, data).then(res => {
						if (res.code == 200) {
							this.payShow = false
							this.prizeList = res.data.participations_arr
							this.drawResultShow = true
							this.getDetail()
						}
					})
				}

			},
			closePopup() {
				this.payShow = false
			},
			payType(item) {
				console.log(item)
				this.payId = item.id
			},
			agreeBtn() {
				this.agreeSta = !this.agreeSta
			},
			gotoin() {
				uni.switchTab({
					url: '/pages/bonus/index',
				})
			},
			accept() {
				this.drawResultShow = false
			},
			challengeBoxOrderPrizesWinnerRecord() {
				let data = {
					boxs: this.boxs,
					challenge_box_id: this.mhId
				}
				this.$Request.get(this.$api.index.challengeBoxOrderPrizesWinnerRecord, data).then(res => {
					if (res.code == 200) {
						this.rewardList = res.data.data.data
					}
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	/deep/.zp-scroll-view-absolute {
		background-color: transparent !important;
		background-image: none !important;
	}

	/deep/.z-paging-content-full {
		height: 86% !important;
	}

	.page {
		width: 100vw;
		min-height: 100vh;
		background-color: rgba(14, 14, 15, 1);
		position: relative;

		.header_box {
			width: 750rpx;
			height: 561rpx;
			background-size: 100% 100%;
		}

		.toubuzhaopintop_box {
			width: 500rpx;
			height: 426rpx;
			margin: auto;
			margin-top: -300rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				display: block;
				width: 80%;

			}
		}

		.dizuo_boxss {
			width: 650rpx;
			height: 240rpx;
			margin: auto;
			margin-top: -110rpx;
			background-size: 100% 100%;
			margin-bottom: 23rpx;
		}

		.shangxiaxiang_left_box {
			width: 90rpx;
			position: absolute;
			left: 30rpx;
			top: 493rpx;

			.top_box {
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 22rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.text_boxsss {
				width: 100%;
				font-family: text1;
				font-weight: bold;
				font-size: 26rpx;
				color: #FFFFFF;
				text-align: center;
			}
		}

		.shangxiaxiang_right_box {
			width: 90rpx;
			position: absolute;
			right: 30rpx;
			top: 493rpx;

			.top_box {
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 22rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.text_boxsss {
				width: 100%;
				font-family: text1;
				font-weight: bold;
				font-size: 26rpx;
				color: #FFFFFF;
				text-align: center;
			}
		}

		.cebianniu_box1 {
			width: 109rpx;
			height: 122rpx;
			position: absolute;
			right: 30rpx;
			top: 668rpx;
			z-index: 999;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.cebianniu_box2 {
			width: 109rpx;
			height: 122rpx;
			position: absolute;
			right: 30rpx;
			top: 808rpx;
			z-index: 999;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.cebianniu_box3 {
			width: 109rpx;
			height: 122rpx;
			position: absolute;
			right: 30rpx;
			top: 947rpx;
			z-index: 999;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.cebianniu_box4 {
			width: 109rpx;
			height: 122rpx;
			position: absolute;
			left: 30rpx;
			top: 668rpx;
			z-index: 999;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.cebianniu_box5 {
			width: 109rpx;
			height: 122rpx;
			position: absolute;
			left: 30rpx;
			top: 808rpx;
			padding: 0;
			background: transparent;
			border: none;
			z-index: 999;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.mingzi_nboix {
			width: 750rpx;
			height: 78rpx;
			background-size: 100% 100%;
			font-family: text1;
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 90rpx;
			text-align: center;
			margin-bottom: 38rpx;
		}

		.zhongjianbufdenbox {
			width: 100%;
			height: 355rpx;
			padding: 0 0 0 20rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			margin-bottom: 58rpx;

			.left_zuigaopin_box {
				width: 300rpx;
				height: 355rpx;
				background-size: 100% 100%;
				box-sizing: border-box;
				// padding-top: 35rpx;

				.shangxiaxiang {
					width: 300rpx;
					height: 160rpx;
					background-size: 100% 100%;
					display: flex;
					justify-content: center;
					align-items: center;

					.jiantou {
						width: 40rpx;
						height: 47rpx;
						margin-right: 6rpx;

						image {
							width: 40rpx;
							height: 47rpx;
						}
					}

					.zi {
						height: 160rpx;
						font-family: text1;
						font-weight: bold;
						font-size: 36rpx;
						color: #FFEDD7;
						line-height: 160rpx;
					}
				}
			}

			.right_boxsss {
				width: 410rpx;
				height: 355rpx;

				.r_tt_box {
					width: 100%;
					height: 241rpx;
					background-size: 100% 100%;
					box-sizing: border-box;
					padding-top: 15rpx;
					padding-left: 15rpx;

					.dange1_box {
						width: 100%;
						height: 41rpx;
						display: flex;
						justify-content: flex-start;
						align-items: center;

						.left_icon_box {
							width: 41rpx;
							height: 41rpx;
							margin-right: 11rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.rt_text_box {
							height: 41rpx;
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #F6ABAB;
							line-height: 41rpx;
							font-style: italic;
						}
					}
				}

				.bjg_suoxiang_box {
					width: 380rpx;
					height: 100rpx;
					display: flex;
					justify-content: space-around;
					align-items: center;

					.bottom_right_box {
						width: 160rpx;
						height: 100rpx;
						background-size: 100% 100%;
						display: flex;
						justify-content: center;
						align-items: center;

						.left_icon_3_box {
							width: 41rpx;
							height: 41rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.huanyixiang {
							// width: 111rpx;
							height: 100rpx;
							font-family: text1;
							font-weight: bold;
							font-size: 27rpx;
							color: rgba(246, 171, 171, 1);
							line-height: 100rpx;
						}
					}
				}

				.bjg_suoxiang_box1 {
					width: 380rpx;
					height: 100rpx;
					display: flex;
					justify-content: space-around;
					align-items: center;

					.bottom_right_box {
						width: 380rpx;
						height: 100rpx;
						background-size: 100% 100%;
						display: flex;
						justify-content: center;
						align-items: center;

						.left_icon_3_box {
							width: 53rpx;
							height: 53rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.huanyixiang {
							// width: 111rpx;
							height: 100rpx;
							font-family: text1;
							font-weight: bold;
							font-size: 36rpx;
							color: rgba(246, 171, 171, 1);
							line-height: 100rpx;
						}
					}
				}

			}
		}

		.gailvznbgabn_box {
			width: 100%;
			height: 44rpx;
			background-size: 100% 100%;
			text-align: center;
			font-family: text1;
			font-weight: bold;
			font-size: 26rpx;
			color: #F5B6C2;
			line-height: 30rpx;
			margin-bottom: 28rpx;
		}

		.content_bvox {
			width: 100%;
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 0 28rpx;
			flex-wrap: wrap;

			.big_con_box {
				width: 210rpx;
				margin-bottom: 30rpx;

				.dange_box {
					width: 210rpx;
					height: 274rpx;
					background-size: 100% 100%;
					position: relative;
					margin-bottom: 13rpx;
					box-sizing: border-box;

					.dengji_box {
						font-family: text1;
						font-weight: bold;
						font-size: 24rpx;
						color: #E7CE18;
						position: absolute;
						top: 5rpx;
						left: 18rpx;
						z-index: 3;

						&.dengji_box_1 {
							color: #E7CE18;
						}

						&.dengji_box_2 {
							color: #D876FC;
						}

						&.dengji_box_6 {
							color: #F9B7B1;
						}

						&.dengji_box_8,
						.dengji_box_10 {
							color: #FEB0D1;
						}
					}

					.image_box {
						position: absolute;
						width: 180rpx;
						height: 230rpx;
						top: 28rpx;
						left: 0;
						right: 0;
						margin: auto;

						.ysk_bix {
							width: 180rpx;
							height: 230rpx;
							position: absolute;
							left: 0;
							top: 0;

							image {
								width: 100%;
								height: 100%;
							}
						}

						image {
							width: 100%;
							height: 100%;
						}
					}

					.yuansu_box {
						position: absolute;
						width: 100%;
						height: 16rpx;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 16rpx;
						color: #FFFFFF;
						line-height: 18rpx;
						box-sizing: border-box;
						padding: 0 5;
						bottom: 20rpx;
						display: flex;
						justify-content: space-between;
					}
				}

				.name_box {
					width: 100%;
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 24rpx;
					color: #FFFFFF;
					overflow: hidden;
					text-align: center;
					text-overflow: ellipsis;
					white-space: nowrap;

				}

			}

		}

		.choujiang_box {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 240rpx;
			display: flex;
			justify-content: space-around;
			z-index: 4;

			.dange_choujiang_box {
				width: 139rpx;
				height: 160rpx;
				background-size: 100% 100%;
				box-sizing: border-box;
				padding-top: 41rpx;
				flex-shrink: 0;

				.top_jichou_box {
					margin-bottom: 14rpx;
					width: 100%;
					height: 44rpx;
					font-family: text1;
					font-weight: bold;
					font-size: 48rpx;
					color: #FFEDD7;
					line-height: 44rpx;
					text-align: center;
				}

				.top_price_box {
					width: 100%;
					height: 23rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFEDD7;
					line-height: 23rpx;
					text-align: center;
				}
			}
		}




		.tanchuang_box {
			width: 750rpx;
			height: 1000rpx;
			background-size: 100% 100%;
			box-sizing: border-box;
			padding-top: 45rpx;
			position: relative;


			.title_box {
				width: 442rpx;
				height: 66rpx;
				background-size: 100% 100%;
				margin: auto;
				margin-bottom: 34rpx;
			}

			.close_guanbi_box {
				position: absolute;
				width: 72rpx;
				height: 72rpx;
				background-size: 100% 100%;
				top: 41rpx;
				right: 21rpx;
			}

			// .haudongquyu_nox {
			//     width: 100%;
			//     height: 840rpx;
			//     box-sizing: border-box;
			//     padding: 0 5rpx;
			//     overflow: hidden;
			//     overflow-y: auto;

			.dange_boxjilu {
				width: 740rpx;
				height: 100rpx;
				margin: auto;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-bottom: 41rpx;
				box-sizing: border-box;
				padding: 0 20rpx;
				position: relative;

				.touxiang_box {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 30rpx;
					position: relative;

					.touxiangkuang_box {
						width: 100rpx;
						height: 100rpx;
						left: -13rpx;
						top: -10rpx;
						position: absolute;

						image {
							width: 100%;
							height: 100%;
						}
					}

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.name_shaop_box {
					height: 100rpx;

					.t_1_box {
						display: flex;
						justify-content: flex-start;

						.left_name_box {
							height: 50rpx;
							font-family: PingFang SC;
							font-weight: bold;
							font-size: 24rpx;
							color: #F6F4FF;
							line-height: 50rpx;
							margin-right: 20rpx;
						}

						.rt_level_name_box {
							box-sizing: border-box;
							padding-top: 5rpx;
							height: 39rpx;

							image {
								height: 39rpx;
							}

						}
					}

					.b_2_box {
						height: 50rpx;
						font-family: PingFang SC;
						// font-weight: bold;
						font-size: 22rpx;
						color: #F6F4FF;
						line-height: 50rpx;
						text-align: center;
					}


				}

				.right_boxss {
					position: absolute;
					right: 30rpx;
					height: 100rpx;

					.shop_dengjibox {
						height: 50rpx;
						font-family: text1;
						font-weight: bold;
						font-size: 28rpx;
						color: #FFFFFF;
						line-height: 50rpx;
						text-align: right;
					}

					.shijian_box {
						width: 300rpx;
						height: 50rpx;
						text-align: right;
						font-family: PingFang SC;
						// font-weight: bold;
						font-size: 22rpx;
						color: #F6F4FF;
						line-height: 50rpx;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}
				}

			}

			// }
		}




	}
</style>